<template>
  <div class="entrust">
    <!-- 标题 -->
    <div class="nav-text">我接取的</div>
    <el-divider />
    <!-- 委托信息-我接取的 -->
    <div v-if="username !== 'Firudo' || items[0] == undefined" style="text-align:center; padding-top: 30px;">
      <span style="color:#515767;">还没有接取委托!</span>
    </div>
    <ul class="myentrusts-list" v-else>
      <li class="myentrust" v-for="item in items">
        <div class="info">
          <span class="username">{{ item.name }}</span><span class="datatime">{{ item.datatime }}</span><span
            class="tag">{{ item.tag }}</span>
        </div>
        <h3 class="title">
          {{ item.title }}
        </h3>
        <div class="biography">
          {{ item.biography }}
        </div>
        <div class="btn-list">
          <el-button type="primary" @click="dialogVisible1 = true">提交委托</el-button>
          <el-button type="danger" @click="dialogVisible2 = true">取消接取</el-button>

          <!-- 提交项目 -->
          <el-dialog v-model="dialogVisible1" title="提交委托" width="60%">
            <!-- <span>提交项目</span> -->
            <el-form :model="form" label-width="50px">
              <el-form-item label="标题">
                <el-input v-model="form.title" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="form.content" type="textarea" />
              </el-form-item>
              <el-form-item>
                <el-upload v-model:file-list="fileList" class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                  :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                  :on-exceed="handleExceed">
                  <el-button type="primary">上传</el-button>
                  <template #tip>
                    <div class="el-upload__tip">
                      点击上传文件
                    </div>
                  </template>
                </el-upload>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible1 = false">关闭</el-button>
                <el-button type="primary" @click="onSubmit">
                  提交
                </el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 取消接取委托 -->
          <el-dialog v-model="dialogVisible2" title="取消接取委托" width="30%">
            <span>你确定要取消接取该委托吗？取消委托将会<b>返还定金并扣除10分信用点</b>！</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">关闭</el-button>
                <el-button type="primary" @click="cancelFunc">
                  确定
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
        <el-divider />
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message/style/css"; // 按需引入ElMessage样式失败，手动引入
import "element-plus/es/components/message-box/style/css";
import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
  {
    name: '定制微信小程序第一版.zip',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `单次文件上传上限为3, 超出了上传限制!`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `确定要取消上传 ${uploadFile.name} 吗?`
  ).then(
    () => true,
    () => false
  )
}

const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)

const username = localStorage.getItem('username');

const items = ref([
  {
    name: '张三',
    datatime: '2023年4月21日',
    tag: '微信小程序开发',
    title: '微信小程序定制',
    biography: '寻找大佬定制微信小程序，项目详细需求在文档中。'
  }
]);

// 提交委托
const form = reactive({
  title: '',
  content: '',
  file: '',
})

const onSubmit = () => {
  console.log('submit!')
  ElMessage({
    message: '提交成功!',
    type: 'success',
  })
}

// 取消委托接取
const cancelFunc = () => {
  dialogVisible2.value = false
  items.value = [];
  ElMessage({
    message: '取消成功!',
    type: 'success',
  })
}
</script>

<style lang="less" scoped>
.entrust {

  .nav-text {
    font-weight: 600;
    font-size: 20px;
    line-height: 18px;
    color: #333;
    margin-bottom: 20px;
  }

  .myentrusts-list {

    .myentrust {
      // padding-top: 10px;

      .info {
        color: #515767;
        padding: 5px 0;

        &>span {
          padding: 0 10px;
        }
      }

      .title {
        font-size: 20px;
        padding: 5px 10px;
      }

      .biography {
        color: #515767;
        padding: 5px 10px;
      }

      .btn-list {
        padding-left: 10px;
      }

      :deep(.el-divider--horizontal) {
        margin: 12px 0px;
      }
    }

  }
}
</style>